<template>
  <view class="flex m-t10 m-b30">
    <view class="flex flex-1" @click="open">
      <text class="text-700-130">{{ selectedCity }}</text>
      <image class="square-30 m-l14" src="@/static/images/home/location-1.png" />
    </view>

    <view class="input-view flex p-h16">
      <image class="square-48" src="@/static/images/public/search.png" />
      <text class="p-h10 text-500-428">请输入关键词/职位</text>
    </view>

    <up-picker
      ref="pickerRef"
      title="选择城市"
			closeOnClickOverlay
      :show="show"
      :columns="[columns]"
      @confirm="onConfirm"
      @cancel="close" @close="close" />
  </view>
</template>

<script lang="ts" setup>
  import { useHomeLocationPicker } from '@/hooks/use-home-location'

  const {
    pickerRef,
    selectedCity,
    columns,
    show,
    open,
    close,
    onConfirm,
  } = useHomeLocationPicker()
</script>

<style lang="scss" scoped>
	.input-view {
		width: 570rpx;
		height: 74rpx;
		border-radius: 20rpx;
		background-color: $bg-color-1;
	}
</style>
